<template>
  <div class="header-content">
    <div class="logo-and-menu">
      <img src="@/assets/mylogo.png" style="width: 150px; height: 60px;">
      <el-menu
          router
          :default-active="def_url"
          class="el-menu-demo" mode="horizontal"
          @select="handleSelect"
          background-color="transparent"
          text-color="#000"
          active-text-color="#ffd04b" style="margin-left: 20px;">
        <el-menu-item :index="navMenu.url" v-for="navMenu in navMenus" :key="navMenu.url">
          {{ navMenu.name }}
        </el-menu-item>
      </el-menu>
      <div class="search-and-user">
        <el-input v-model="searchQuery" placeholder="请输入搜索内容" style="width: 200px; margin-right: 10px;"/>
        <el-button type="primary" @click="handleSearch" plain>搜索</el-button>
        <div class="user-info">
          <img class="icon" :src="icon" >
          <el-dropdown>
          <span>{{ realname }}</span>
          <i class="el-icon-arrow-down" style="margin-left: 5px;"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="goToPersonalCenter">个人中心</el-dropdown-item>
            <el-dropdown-item @click.native="confirmLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ReaderHeader",
  data() {
    return {
      def_url: 'front_page',
      navMenus: [],
      searchQuery: '',
    }
  },
  computed: {
    realname() {
      return sessionStorage.getItem("realname");
    },
    icon() {
      return sessionStorage.getItem("icon");
    },
  },
  methods: {
    async fetchNavMenus() {
      try {
        const { data: res } = await this.$axios.get("navMenu/list");
        if (res.data) {
          this.navMenus = res.data;
        } else {
          console.error('No data returned from API');
        }
      } catch (error) {
        console.error('Error fetching nav menus:', error);
      }
    },
    handleSelect(key, keyPath) {
      this.def_url = key
      sessionStorage.setItem('clickd_url',key)
    },
    handleSearch() {
      if (!this.searchQuery.trim()) {
        this.$message.warning('请输入搜索内容');
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        this.$router.push({ name: 'search', query: { name: this.searchQuery } });
      }, 1200);
    },
    goToPersonalCenter() {
      this.$router.push({ name: 'personal_center' });
    },
    confirmLogout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout();
      }).catch(() => {
      });
    },
    logout(){
      window.localStorage.clear()
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
  },
  mounted() {
    this.fetchNavMenus();
    const url = sessionStorage.getItem('clickd_url')
    if(url){
      this.def_url = url
    }
  },
}
</script>

<style scoped>
.header-content {
  position: relative;
  height: 100%;
}

.logo-and-menu {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  position: relative;
  z-index: 1001;
  padding: 5px;
}
.search-and-user {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
}

.el-header {
  background-color: transparent;
  color: #333;
  text-align: center;
  height: 80px;
  position: relative;
}



.icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  vertical-align: middle;
}

.el-menu {
  background-color: transparent;
  text-color: #FF6347;
}

.el-menu-item {
  color: #FF6347;
}

.el-menu-item.is-active {
  color: #ffd04b;
}
</style>